<!--
 * @Description:
 * @version:
 * @Author: 娃哈哈
 * @Date: 2024-12-18 21:09:43
-->
<template>
    <div class="box">
        <bgBox>
            <sectionTitle title="知识分享" />
            <div class="content">
                <labelBox v-for="(item,index) in list" :key="index" :label="item.name" :value="item.value"  @titleClick="titleClick"/>
            </div>
        </bgBox>
    </div>
</template>

<script setup lang="ts">
import bgBox from '../components/bgBox.vue'
import sectionTitle from '../components/sectionTitle.vue'
import ScrollTable from '../components/scrollTable.vue'
import { reactive, ref, inject } from 'vue';
import labelBox from '../components/labelBox.vue'
import { currentGET } from "@/api";
import { PopupType } from '../../index.d'
const showPopup = inject('showPopup') as (data: PopupType) => void;
/**
 * 获取列表点击事件
 */
const titleClick = (item: Object) => {
  console.log(item)
    showPopup({ type: 41, show: true, popupFlag: 'knowledgeList', searchInfo: {type: item.name }})
    // showPopup({ type: 5, show: true, popupFlag: 'info', })
}
const list = ref([]);
const getData = () => {
  currentGET("knowledgeType").then((res) => {
    console.log(res);
    if (res.success) {
      list.value = res.data.list;
    }
  });
};
getData();
</script>

<style scoped lang="less">
.box {
    height: 180px;
}

.content {
    height: 160px;
    padding: 10px 12px 0 25px;
}

.thead {
    display: flex;
    justify-content: space-around;
    height: 32px;
    line-height: 32px;
    background: url('@/assets/img/tabTitle.png') no-repeat 50%;
    background-size: 100% 100%;
    text-align: center;

    .th {
        &:first-child {
            width: 30%;
        }

        &:nth-child(2) {
            width: 40%;
        }

        &:last-child {
            width: 30%;
        }
    }
}

.el-dialog__wrapper {
    pointer-events: none;

    :deep( .el-dialog) {
        pointer-events: auto;
    }
}

.message-dialog {

    .el-dialog__header,
    .el-dialog__body,
    .el-dialog__footer {
        pointer-events: auto !important;
    }
}

:has(> .el-overlay-dialog .message-dialog) {
    pointer-events: none !important;
}
</style>